<!doctype html>
<html amp lang="zh-cmn-Hans">
{% load pages_tags mezzanine_tags i18n future staticfiles macros %}

<head>
<title>{% block meta_title %}{% endblock %}  - Phodal {% if settings.SITE_TITLE %} | {{ settings.SITE_TITLE }}{% endif %}</title>

<meta charset="utf-8">
<meta http-equiv="content-language" content="zh-CN" />
<meta name="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="keywords" content="{% block meta_keywords %}{% endblock %}">
<meta name="description" content="{% block meta_description %}{% endblock %}">
<link rel="canonical" href="https://www.phodal.com/blog/{{ slug }}" />
<link rel="alternate" href="android-app://com.phodal.blog/https/www.phodal.com/blog/{{ slug }}" />
<link rel="alternate" hreflang="x-default" href="https://www.phodal.com/blog/{{ slug }}"/>
<meta name="baidu-site-verification" content="dZvx5Cg1jt" />
<meta name="baidu-tc-verification" content="f7b366ac5d55ab1f7b49d02aba0b7729" />
<meta name="google-site-verification" content="3-n5j67nVlQ0ICC3DJb28FXuJI7pEei5v2kx7AR8eHU" />
<meta name="360-site-verification" content="cba6ea64db6f8161813b27e9897ab6c8" />
<meta name="msvalidate.01" content="F30E514979FE4E6033CFC2F92FA816C4" />
<meta name="sogou_site_verification" content="46iR0w9xzJ"/>
<meta name="bitly-verification" content="b4cdaf394c9f"/>
<meta itemprop="url" content="https://www.phodal.com"/>
<link rel="shortcut icon" href="{% static "phodal/images/favicon.ico" %}">

<meta name="google-play-app" content="app-id=ren.growth">
<meta name="apple-itunes-app" content="app-id=1078807522">
<meta name="msApplication-ID" content="51077Phodal.GrowthRen" />
<meta name="msApplication-PackageFamilyName" content="51077Phodal.GrowthRen_d4jwzt1r37cxj" />


{% compress css %}
<style amp-custom>
progress,sub,sup{vertical-align:baseline}button,hr,input,select{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}button,input,select,textarea{font:inherit;margin:0}.header span,.splash h1,footer .copy{line-height:200%}optgroup{font-weight:700}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}a,body,h1,h2,h3,h4,p{font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Inconsolata,Roboto,"Helvetica Neue",Verdana,Tahoma,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif}h1,h2,h3{text-align:center}article{background:#faf9f9;padding:.5em 1em}.pure-menu{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pure-menu-fixed{position:fixed;left:0;top:0;z-index:3}.pure-menu-item,.pure-menu-list{position:relative}.pure-menu-list{list-style:none;margin:0;padding:0}.pure-menu-item{padding:0;margin:0;height:100%}.pure-menu-heading,.pure-menu-link{display:block;text-decoration:none;white-space:nowrap}.pure-menu-scrollable{overflow-y:scroll;overflow-x:hidden}.pure-menu-scrollable .pure-menu-list{display:block}.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list{display:inline-block}.pure-menu-horizontal.pure-menu-scrollable{white-space:nowrap;overflow-y:hidden;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding:.5em 0}.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar{display:none}.pure-menu-horizontal .pure-menu-item{display:inline-block;line-height:200%}.nav{margin:0 auto;textstransform:uppercase}.header{height:36px;color:#fff;background-color:#5e6772;padding:.5em}.header a{color:#fff;text-decoration:none}.header ul{float:right}.super-header{background:#222;color:#000}.super-header input{border:none;border-bottom:1px solid #eee;font-size:14px;outline:0;margin:0;padding:4px 0;width:255px;background:0 0;text-align:left;color:inherit;-webkit-appearance:none}.splash h1,footer .pure-menu-link{color:#fff}.supernav{margin:0;text-align:right;padding:0}.supernav ul li a{font-size:12px}.splash h1{padding-top:100px}.aboutme,.content{padding:1em}.is-center{text-align:center}.l-content{margin:0 auto}.aboutme{background:#eee;margin-bottom:2em}footer{background-color:#5e6772}footer .pure-menu{padding:25px 0 0}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-menu-disabled,.pure-menu-heading,.pure-menu-link{padding:.5em 1em}.pure-menu-link:focus,.pure-menu-link:hover,footer .pure-menu-active>.pure-menu-link{color:#eee;background-color:#23B7F3}footer .copy{background:#222;padding:10px 0;color:#fff}footer .margin-center{margin:0 auto}
</style>
{% endcompress %}
    
{% block extra_head %}{% endblock %}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.phodal.com/amp/{{ blog_post.slug}}/"
  },
  "headline": "{{ blog_post.title }}",
  "datePublished": "{{blog_post.publish_date}}",
  "dateModified": "{{blog_post.updated}}",
  "author": {
    "@type": "Person",
    "name": "Phodal"
  },
"image": {
    "@type": "ImageObject",
    "url": "https://www.phodal.com/static/phodal/images/phodal.jpg",
    "height": 320,
    "width": 320
  },
  "publisher": {
    "@type": "Organization",
    "name": "Phodal",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.phodal.com/static/phodal/images/publisher-logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "{{ blog_post.description }}"
}
</script>

</head>

{% macro page_title %}
    <span class="android-logo-image">{% block title %}{% endblock %}</span>
{% endmacro %}

<body itemscope itemtype="http://schema.org/WebPage">
<div class="pure-g">
    <div class="header pure-u-1">
        <div class="pure-menu pure-menu-horizontal nav pure-u-md-1-1">
            <span><a href="/">PHODAL</a></span>
            <ul class="pure-menu-list menunav">
                <li class="pure-menu-item"><a href="/blog/" class="pure-menu-link">BLOG</a></li>
                <li class="pure-menu-item"><a href="/works/" class="pure-menu-link">CODE</a></li>
                <li class="pure-menu-item"><a href="/literature/" class="pure-menu-link">LITERATURE</a></li>
            </ul>
        </div>
    </div>

    <div class="android-content mdl-layout__content">
        <div class="mdl-grid mdl-cell--12-col">
            <div class="middle mdl-layout__content mdl-cell">
                {% block main %}{% endblock %}
            </div>
        </div>
        <footer>
            <div class="pure-g">
                <div class="pure-u-5-6 margin-center">
                {% page_menu "pages/menus/homepage_footer.html" %}
                </div>
                <div class="is-center pure-u-1-1 copy">
                    A Phodal's Project
                </div>
            </div>
        </footer>
    </div>
</div>

</body>
</html>
